<template>
    <el-select
        v-model="label"
        clearable
        filterable
        :popper-append-to-body="false"
        ref="select"
    >
        <template #empty>
            <div class="content">
                <el-input
                    placeholder="输入关键字进行过滤"
                    v-model="filterText"
                    size="mini"
                    class="search"
                >
                </el-input>
                <el-tree
                    class="filter-tree"
                    node-key="value"
                    :data="treeData"
                    :props="defaultProps"
                    :filter-node-method="filterNode"
                    ref="tree"
                    :check-on-click-node="true"
                    :expand-on-click-node="false"
                    :highlight-current="true"
                    @node-click="nodeClick"
                >
                </el-tree>
            </div>
        </template>
    </el-select>
</template>

<script>
export default {
    props: {
        value: {
            required: false,
        },
        options: {
            required: false,
        },
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },
        id: {
            deep: true,
            handler(val) {
                if (val && !this.label) {
                    let item = this.findItem(val, this.treeData);
                    this.label = item[this.dictLabel];
                }
            },
            immediate: true,
        },
    },
    data() {
        return {
            filterText: "",
            label: "",
            treeData: [
                {
                    label: "label1",
                    value: "1",
                    children: [
                        {
                            label: "label1.1",
                            value: "1.1",
                        },
                    ],
                },
                {
                    label: "label2",
                    value: "2",
                    children: [
                        {
                            label: "label2.1",
                            value: "2.1",
                        },
                    ],
                },
            ],
        };
    },
    computed: {
        id: {
            get() {
                return this.useVModel.call(this);
            },
            set(val) {
                this.$emit("input", val);
            },
        },
        dictLabel() {
            return this?.options?.dictLabel ?? "label";
        },
        dictValue() {
            return this?.options?.dictLabel ?? "value";
        },
        dictChildren() {
            return this?.options?.dictChildren ?? "children";
        },
        defaultProps() {
            return {
                children: this.dictChildren,
                label: this.dictLabel,
            };
        },
    },
    mounted() {},
    methods: {
        findItem(val, obj) {
            let _this = this;
            let item = obj.find((item) => {
                if (item[_this.dictValue] == val) {
                    return true;
                } else {
                    if (item?.dictChildren?.length > 0) {
                        return _this.findItem(val, item[_this.dictChildren]);
                    } else {
                        return false;
                    }
                }
            });
            if (item) return item;
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        nodeClick() {
            let node = this.$refs.tree.getCurrentNode();
            let id = this.$refs.tree.getCurrentKey();
            this.label = node?.[this.dictLabel];
            this.id = node?.[this.dictValue];
            this.$refs.select.blur();
        },
    },
};
</script>
<style lang="scss" scoped>
.content {
    padding: 10px;
    .search {
        margin-bottom: 10px;
    }
}
</style>
